import React from 'react';
import {List, Picker} from 'antd-mobile';
import {Tool} from '../../utils';

import './index.scss';

//选择器的数据
const dataList = [
  [
    {value: 'zh', label: '中文'},
    {value: 'en', label: 'English'}
  ]
];

/**
 * 国际化选择组件：需要先配置react-intl。
 */
export default class Locale extends React.Component {
  static defaultProps = {
    className: ''
  };

  constructor(props) {
    super(props);
    this.state = {
      selectValue: this.getDefaultValue() //选择的语言
    };
  }

  render() {
    let {className} = this.props;
    return (
      <Picker
        className={className}
        data={dataList}
        title="选择语言"
        cascade={false}
        extra="请选择"
        value={this.state.selectValue}
        onOk={this.onChange}
      >
        <List.Item arrow="horizontal">选择语言</List.Item>
      </Picker>
    );
  }

  /**
   * 获取默认的语言
   */
  getDefaultValue() {
    let locale = Tool.getItem('locale') || 'zh';
    return [locale];
  }

  /**
   * 监听国际化选择器的改变
   * @param locale 选中的国家
   */
  onChange(locale) {
    Tool.setItem('locale', locale[0]);
    window.location.reload(); //刷新页面
  }
}
